<template>
  <a-popover position="bottom">
    <i-icons-question class="cursor-pointer question-icon" />
    <template #content>
      <div class="item">
        <div class="icon">
          <i-icons-node-normal />
        </div>
        <span>节点正常</span>
      </div>
      <div class="item">
        <div class="icon">
          <i-icons-warning />
        </div>
        <span>节点异常</span>
      </div>
      <div class="item">
        <div class="icon">
          <i-icons-failed />
        </div>
        <span>节点离线</span>
      </div>
      <div class="item">
        <div class="icon">
          <i-icons-node-stop />
        </div>
        <span>节点停止</span>
      </div>
      <div class="item">
        <div class="icon">
          <i-icons-node-analysis-on />
        </div>
        <span>已解析</span>
      </div>
      <div class="item">
        <div class="icon">
          <i-icons-node-analysis-off />
        </div>
        <span>未解析</span>
      </div>
      <div class="item">
        <div class="icon">
          <i-icons-node-init />
        </div>
        <span>初始化</span>
      </div>
    </template>
  </a-popover>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.item {
  @apply flex items-center py-2 px-1;
  .icon {
    @apply flex items-center mr-2;
  }
  span {
    @apply text-sm/22px text-1;
  }
}
</style>
